<template>
  <div class="dashboard-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="编号" width="95" prop="id" />
      <el-table-column align="center" label="名称" prop="mingcheng" />
      <el-table-column align="center" label="现价" prop="xianjia" />
      <el-table-column align="center" label="原价" prop="yuanjia" />
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleClick(scope.row)" size="small">编辑</el-button>
        </template>
      </el-table-column>
      
    </el-table>
    <!-- <pagination :total='Number(total)' @pageChange='pageChange'/> -->

    <el-dialog title="编辑产品" width="500px" :visible.sync="dialogFormVisible">
      <el-form :model="form" :label-width="formLabelWidth">
        <el-form-item label="名称" >
          <el-input v-model="form.mingcheng" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="适合对象">
          <el-input v-model="form.shihe" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="现价">
          <el-input v-model="form.xianjia" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="原价">
          <el-input v-model="form.yuanjia" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="特点">
          <el-input type="textarea" v-model="form.tedian" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.qita" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getList, saveChanpin } from '@/api/chanpin'
import pagination from "@/components/page/page.vue";//分页
export default {
  name: 'Dashboard',
  data(){
    return {
      list: null,
      total:0,
      listLoading: true,
      dialogFormVisible:false,
      formLabelWidth:'80px',
      form: '',
    }
  },
  created() {
    this.fetchData()
  },
  components: {
    pagination
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then(res => {
        this.list = res.data.list
        this.total = res.data.total
        this.listLoading = false
      })
    },
    handleClick(row){
      this.dialogFormVisible = true
      this.form=JSON.parse(JSON.stringify(row)); 
    },
    onUpdate(){
      saveChanpin(this.form).then(res =>{
        if(res.data == '8888' || res.data == '1'){
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.dialogFormVisible = false
          this.fetchData()
        }
      })
    },
    //分页
    pageChange(val){
      this.getOrderList({page:val})
      this.listLoading= true
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
